<template>
    <view class="card-item">
		<image class="mian-img" v-show="!isShowVedio" :src="posterSrc" mode="aspectFill"></image>
		<view class="video-box" v-show="isShowVedio" @click.stop="clearClick">
			<video
				id="myVideo"
				:src="videoSrc"
				class="video-windon"
				@error="videoErrorCallback"
				@play="playStart"
				@pause="pauseVideo"
				:enable-progress-gesture="false"
				:loop="true"
				:controls="controlStatus"
				page-gesture="true"
				vslide-gesture="true"
				vslide-gesture-in-fullscreen="true"
				show-mute-btn="true"
				muted
			></video>
		</view>
		<image
			class="play-icon"
			@click.stop="playVideo()"
			v-if="!isShowVedio"
			src="/static/img/index/ic_home_play_image.png"
			mode=""
		></image>
    </view>
</template>

<script>
    export default {		
		data() {
			return {
				isShowVedio:false,
				controlStatus:false,//判断是否显示控制条
				videoSrc:'',//视频Src
				posterSrc:''//视频主图
			};
		},
        props: {
			initializationParams:{
				type: String,
				default: ""
			},
			//来源模块在页面的排序序号
			moduleOrder: {
				type: [Number,String],
				default: 0
			}
        },
		created() {
			let data = JSON.parse(this.initializationParams);
			this.posterSrc = data.imageUrl;
			this.videoSrc = data.videoUrl;
			this.getStatus();
		},
		methods: {
			videoErrorCallback(e) {
				this.$utils.toast(e.target.errMsg);
			},
			//播放监听
			playStart(e){
				//#ifdef H5
				// this.$utils.videoBridge('mediaPlay')
				const videoCon = document.getElementById('myVideo')
				const videoDom = videoCon.getElementsByTagName('video')
				videoDom[0].setAttribute('controls','controls')
				// if(this.networkType != 'Wifi' && this.playIndex == 1){
				// 	this.$utils.toast('当前为非Wi-Fi环境下播放，请注意流量消耗！');
				// 	this.playIndex ++ 
				// }
				//#endif
			},
			//播放视频
			playVideo() {
				this.isShowVedio = true;
				this.forceUpdate();
				var videoContext = uni.createVideoContext('myVideo', this);
				videoContext.play();
				// this.$utils.videoBridge('mediaPlay')
			},
			//暂停视频
			pauseVideo() {
				console.log('暂停视频');
				var videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause();
				// this.$utils.videoBridge('mediaPause')
			},
			//清除video点击穿透
			clearClick() {},
			forceUpdate() {
				//#ifdef H5
				this.$forceUpdate();
				//#endif
			},
			//判断为H5则取消自带控制条
			getStatus(){
				//#ifdef H5
				this.controlStatus = false;
				//#endif
				//#ifdef MP-WEIXIN
				this.controlStatus = true;
				//#endif
			}
		}
    };
</script>

<style lang="scss" scoped>
.card-item {
	margin: 0rpx auto;
	width: 100%;
	// height: 644rpx;
	background: #ffffff;
	// box-shadow: 0px 2rpx 40rpx 0px #dadada, 0px 0px 2rpx 0px rgba(0, 0, 0, 0.12);
	// border-radius: 20rpx;
	// padding-bottom: 5rpx;
	position: relative;
	.mian-img {
		// border-radius: 20rpx 20rpx 0px 0px;
		width: 100%;
		height: 396rpx;
	}
	.video-box {
		// border-radius: 20rpx 20rpx 0px 0px;
		width: 100%;
		height: 396rpx;
		.video-windon {
			// border-radius: 20rpx 20rpx 0px 0px;
			width: 100%;
			height: 396rpx;
		}
	}
	.play-icon {
		position: absolute;
		top: 154rpx;
		left: calc(50% - 44rpx);
		width: 88rpx;
		height: 88rpx;
	}
}
    
</style>
